<script setup lang="ts">

import {onMounted, reactive, ref} from 'vue';
import type {GetType} from "@/type/GetType";
import {deleteData, getAllAnnouncement, post, put} from "@/net";
import {ElMessage, ElMessageBox, ElTable} from "element-plus";
import {Delete, EditPen} from "@element-plus/icons-vue"
import {zhCn} from 'element-plus/es/locale/index.mjs';
// 状态变量
const dialogAddVisible = ref(false);
const dialogUpdateVisible = ref(false);
// 功能函数
const fetchAnnouncementListAndRefresh = () => {
  getAllAnnouncementData();
}

const handlerOperationResult = (s: boolean) => {
  if (s) {
    fetchAnnouncementListAndRefresh();
  }
}
const closeAddDialog = () => {
  dialogAddVisible.value = false;
}
const closeUpdateDialog = () => {
  dialogUpdateVisible.value = false;
}

// 增加
let addAnnouncementForm: announcementType = reactive({
  id: 0,
  name: '',
  information: '',
  type: '',
  time: '',
  remark: '',
});

const submitAddAnnouncement = () => {
  addAnnouncementForm.time = dataPicker;
  console.log(addAnnouncementForm)
  post('api/announcement/add', addAnnouncementForm,
      () => {
        ElMessage.success("添加成功");
        fetchAnnouncementListAndRefresh();
        handlerOperationResult(true);
      }, () => {
        ElMessage.warning("添加失败")
        fetchAnnouncementListAndRefresh();
        closeAddDialog();
      }, () => {
        ElMessage.error("添加失败")
        fetchAnnouncementListAndRefresh();
        closeAddDialog();
      })
}
// 删除
const handleDeleteAnnouncement = (index: number, row: announcementType) => {
  ElMessageBox.confirm("你要删除公告吗?", "提示", {
    icon: "warning",
    confirmButtonText: "确定",
    cancelButtonText: "取消"
  }).then(() => {
    deleteData("api/announcement/delete", {id: row.id},
        () => {
          ElMessage.success("删除成功")
          handlerOperationResult(true);
        }, () => {
          ElMessage.error("删除失败")
        })
  }).catch((e) => {
    ElMessage.error(e)
  })
}
// 修改
let updateAnnouncementForm = reactive({
  id: 0,
  name: '',
  information: '',
  type: '',
  time: '',
  remark: '',
})

const handleUpdateAnnouncement = (row: Partial<typeof updateAnnouncementForm>) => {
  Object.keys(row).forEach((key) => {
    if (updateAnnouncementForm.hasOwnProperty(key as keyof typeof updateAnnouncementForm)) {
      (updateAnnouncementForm as any)[key] = row[key as keyof typeof row]
    }
  })
  dialogUpdateVisible.value = true;
}


const submitUpdateAnnouncement = () => {
  const index = announcementData.findIndex((item) => item.id === updateAnnouncementForm.id);

  try {
    put('api/announcement/update', updateAnnouncementForm,
        () => {
          announcementData[index] = updateAnnouncementForm;
          ElMessage.success("修改成功")
          handlerOperationResult(true);
        },
        () => {
          ElMessage.error("修改失败")
          handlerOperationResult(false);
        }
    )
  } catch (e) {
    ElMessage.error("修改失败")
    handlerOperationResult(false);
  }
}

// 获取
interface announcementType {
  id: number,
  name: string,
  information: string,
  type: string,
  time: string,
  remark: string,
}

let announcementData: announcementType[] = reactive([]);

const getAllAnnouncementData = async () => {
  try {
    const res: GetType = await getAllAnnouncement('/api/announcement/getAll');
    announcementData.splice(0, announcementData.length, ...res.message)
  } catch (e) {
    console.log(e)
  }
}
// 生命周期函数
onMounted(() => {
  getAllAnnouncementData();
})
// 时间变量
const dataPicker = new Date().toLocaleString();


</script>

<template>
  <div style="display: flex; flex-flow: row nowrap; justify-content: space-between; margin-bottom: 10px">
    <div>
      <span>公告,通知管理 > 公告信息</span>
    </div>
    <div style="margin-right: 60px">
      <el-button type="primary" @click="dialogAddVisible = true" id="add_an_button">添加活动</el-button>
    </div>
  </div>

  <el-table ref="table" :data="announcementData" style="width: 100%"
            height="70vh" border
  >
    <el-table-column type="index" label="序号"/>
    <el-table-column prop="name" label="活动名称"/>
    <el-table-column prop="information" label="活动详情"/>
    <el-table-column prop="type" label="活动类型"/>
    <el-table-column prop="time" label="时间"/>
    <el-table-column prop="remark" label="备注"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button name="update" @click="handleUpdateAnnouncement(scope.row)" type="warning" :icon="EditPen" circle/>
        <el-button name="delete" plain @click="handleDeleteAnnouncement(scope.$index,scope.row)" type="danger"
                   :icon="Delete"
                   circle/>
      </template>

    </el-table-column>
  </el-table>


  <el-dialog
      title="添加公告信息"
      :model-value="dialogAddVisible"
      width="50%"
      @close="closeAddDialog"
  >
    <el-form label-width="auto"
             label-position="left"
             label-suffix=":"
             style="width: 500px;"
             v-model="addAnnouncementForm"
    >
      <el-form-item :required="true" label="公告名称">
        <el-input id="an_name" v-model="addAnnouncementForm.name"/>
      </el-form-item>
      <el-form-item :required="true" label="公告详情">
        <el-input id="an_inf" v-model="addAnnouncementForm.information"/>
      </el-form-item>
      <el-form-item :required="true" label="公告类型">
        <el-input id="an_type" v-model="addAnnouncementForm.type"/>
      </el-form-item>
      <el-form-item :required="true" label="活动时间">
        <el-config-provider :locale="zhCn">
          <el-date-picker
              v-model="dataPicker"
              :size="'large'"
              type="date"
              placeholder="选择日期"
          />
        </el-config-provider>
      </el-form-item>
      <el-form-item :required="true" label="备注">
        <el-input id="an_remark" v-model="addAnnouncementForm.remark"/>
      </el-form-item>
      <el-form-item>
        <el-button id="right_button" type="primary" @click="submitAddAnnouncement">提交</el-button>
        <el-button @click="closeAddDialog">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--  修改房屋  -->
  <el-dialog
      title="修改活动信息"
      :model-value="dialogUpdateVisible"
      width="50%"
      @close="closeUpdateDialog"
  >
    <el-form label-width="auto"
             label-position="left"
             label-suffix=":"
             style="width: 500px;"
             v-model="updateAnnouncementForm"
    >
      <el-form-item :required="true" label="公告名称">
        <el-input v-model="updateAnnouncementForm.name"/>
      </el-form-item>
      <el-form-item :required="true" label="公告详情">
        <el-input v-model="updateAnnouncementForm.information"/>
      </el-form-item>
      <el-form-item :required="true" label="公告类型">
        <el-input v-model="updateAnnouncementForm.type"/>
      </el-form-item>
      <el-form-item :required="true" label="活动时间">
        <el-config-provider :locale="zhCn">
          <el-date-picker
              v-model="updateAnnouncementForm.time"
              :size="'large'"
              type="date"
              placeholder="选择日期"
          />
        </el-config-provider>
      </el-form-item>
      <el-form-item :required="true" label="备注">
        <el-input v-model="updateAnnouncementForm.remark"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitUpdateAnnouncement">提交</el-button>
        <el-button @click="closeAddDialog">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<style scoped>
.el-form > .el-form-item {
  margin-bottom: 20px;
  margin-left: 100px;
  width: 350px;
}
</style>


